<template>
	<div class="table_menu" @contextmenu="popMenu">
		<div class="table-con">
			<!--<el-table :data="tableData" @row-contextmenu="popMenu(event)" style="width: 100%">-->
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="date" label="日期" width="180"></el-table-column>
				<el-table-column prop="name" label="姓名" width="180"></el-table-column>
				<el-table-column prop="address" label="地址"></el-table-column>
			</el-table>
		</div>
		<!--<table  class="table">
			<thead class="has-gutter">
				<tr>
					<th class="is-leaf">日期</th>
					<th class="is-leaf">姓名</th>
					<th class="is-leaf">地址</th>
				</tr>
			</thead>
			<tbody > 
				<tr @contextmenu="popMenu">
					<td>111</td><td>1112222</td><td>1112222333</td>
				</tr>
				<tr @contextmenu="popMenu">
					<td>111</td><td>1112222</td><td>1112222333</td>
				</tr>
				<tr @contextmenu="popMenu">
					<td>111</td><td>1112222</td><td>1112222333</td>
				</tr>
			</tbody>
		</table>-->
		<right-menu :pop-items="popItems" :mouse="mousePosition" @ListItemClick="list_item_click"></right-menu>
	</div>
</template>

<script>
	//import { fileUpload,Login} from '@/assets/util/api.js'
	export default {
		data() {
			return {
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}],
				popItems: [
					{
						class: 'fa fa-gg',
						txt: '修改学生照片'
					},
					{
						class: 'fa fa-gg',
						txt: '修改学生面试信息'
					},
					{
						class: 'fa fa-gg',
						txt: '修改学生信息'
					},
					{
						class: 'fa fa-gg',
						txt: '修改学生招生老师'
					},
					{
						class: 'fa fa-gg',
						txt: '修改学生协议信息'
					},
					{
						class: 'fa fa-gg',
						txt: '批量发送短信'
					}
				],
				mousePosition: [],
			};
		},
		mounted() {

		},
		methods: {
			popMenu(data) {
				let self = this;
				let e = event;
				let menuLen = 46;
				e.preventDefault();
				if(e.button === 2) {
					let x = e.pageX;
					let y = e.pageY;
					if(e.pageX > window.screen.width){
						x = window.screen.width - 50;
					}
					console.log("----",window.screen.height - menuLen*self.popItems.length-150)
					if(window.screen.height - menuLen*self.popItems.length-150 < e.pageY ){
						y = window.screen.height - menuLen*self.popItems.length-150;
					}
					console.log("X",x)
					console.log("Y",y)
					self.mousePosition = [x, y];
				} else if(e.button === 0) {
					self.mousePosition = ['close'];
				}
			},
			list_item_click(it) {
				switch(it) {
					case 0:
						alert('第一项被点击');
						break;
					case 1:
						alert('第二项被点击');
						break;
					case 2:
						alert('第二项被点击');
						break;
					case 3:
						alert('第二项被点击');
						break;
					case 4:
						alert('第二项被点击');
						break;
					case 5:
						alert('第二项被点击');
						break;
				}
			}
		},
	}
</script>
<style lang="scss" scoped>
.table_menu{
	/*position: relative;*/
}
.table {
	width: 100%;
    max-width: 100%;
    font-size: 14px;
    color: #606266;
}
.table thead{
	color: #909399;
    font-weight: 500;
}
.table td, .table th.is-leaf{
	border-bottom: 1px solid #ebeef5;
	text-align: left;
}
.table td, .table th{
	padding: 12px 0;
}
.table .has-gutter{
	
}
.table th{
	padding: 12px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
}
tbody tr:hover{
	cursor: pointer;
	background-color: rgb(245, 247, 250);
}
</style>